<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { testCodeDetail,
    testCodeUpdate,
    testCodeAdd } from '@/api/testCode'
  import VForm from "@/components/VForm/index";
  export default {
    components: {
      VForm,
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      id:{},
      openType:{
        type:String,
        default:"add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===',newVal, oldVal)
          let w = this.width.split('%')[0]
          if(w>=60){
            this.rowspan = 2
          }else{
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
      'dictRadioOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='dictRadio'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'dictCheckboxOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='dictCheckbox'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'dictSelectOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='dictSelect'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        rowspan:1,
        dict:{},
        formData: {
          form: {
            name:"",
            num:"",
            sendTime:"",
            pic:[],
            file:[],
            dictRadio:"",
            dictCheckbox:[],
            dictSelect:"",
            remark:"",
          },
          options: [
            {
              title: "名称",
              key: "name",
              type: "text",
            },
            {
              title: "数量",
              key: "num",
              type: "text",
            },
            {
              title: "发送日期",
              key: "sendTime",
              type: "date",
            },
            {
              title: "图片",
              key: "pic",
              type: "file",
              fileType:"image",
              listType:"picture-card",
              uploadTextTip:""
            },
            {
              title: "文件",
              key: "file",
              type: "file",
              fileType:"file",
              listType:"text",
              uploadTextTip:""
            },
            {
              title: "字典radio",
              key: "dictRadio",
              type: "radio",
              option: {
                data: this.dictRadioOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "字典checkBox",
              key: "dictCheckbox",
              type: "checkbox",
              option: {
                data: this.dictCheckboxOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                },
              },
            },
            {
              title: "字典select",
              key: "dictSelect",
              type: "select",
              multiple:false,
              option: {
                data: this.dictSelectOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "备注",
              key: "remark",
              type: "textarea",
            },
          ],
          rules: {
            name :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            num :[
              { required: true, message: '请输入', trigger: 'blur' },
            ],
            sendTime :[
              { required: true, message: '请输入', trigger: 'blur' },
            ],
            pic :[
            ],
            file :[
            ],
            dictRadio :[
            ],
            dictCheckbox :[
            ],
            dictSelect :[
              { required: true, message: '请选择', trigger: 'change'},
            ],
            remark :[
              {max:255, message: '长度最大为255个字符', trigger: 'blur'}
            ],
          },
          labelWidth: "100px",
        },
        // 字典
        dictRadioOptions:[],
        dictCheckboxOptions:[],
        dictSelectOptions:[],
      };
    },
    methods: {
      submitFormat(){
        this.formData.form.pic = JSON.stringify(this.formData.form.pic)
        this.formData.form.file = JSON.stringify(this.formData.form.file)
        this.formData.form.dictCheckbox = this.getCheckBoxData(this.formData.form.dictCheckbox,this.dictCheckboxOptions,"submit")
      },
      loadFormat(){
        this.formData.form.pic  = this.formData.form.pic ? JSON.parse(this.formData.form.pic) : []
        this.formData.form.file  = this.formData.form.file ? JSON.parse(this.formData.form.file) : []
        this.formData.form.dictCheckbox = this.getCheckBoxData(this.formData.form.dictCheckbox,this.dictCheckboxOptions,"load")
      },
      getCheckBoxData(value,option,type){
        if(type=="submit"){
          if(value.length==0){
            return null
          }
          let temp = [];
          value.forEach(t=>{
            let item = option.find(x=> x.label == t)
            if(item!=undefined){
              temp.push(item.value)
            }
          })
          return temp.join(",")
        }else {
          if(!value){
            return []
          }else {
            let data = value.split(",")
            let temp = []
            data.forEach(t=>{
              let item = option.find(x=> x.value == t)
              if(item!=undefined){
                temp.push(item.label)
              }
            })
            return temp
          }
        }
      },
      sure(){
        console.log('sure===',this.formData.form)
        this.$refs.vformComponents.$refs.form.validate().then(res=>{
          this.submitFormat()
          if(this.openType == "add"){
            this.add()
          }else{
            this.update()
          }
        })
      },
      add(){
        this.formData.form.id = null
        testCodeAdd(this.formData.form).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      update(){
        testCodeUpdate(this.formData.form).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      cancel(){
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      closeSuccess(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$emit('success')
      },
      close(){
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$emit('close')
      },
      getData(){
        this.dictRadioOptions = []
        this.$commonJs.filterDataDict("sex",this.dictRadioOptions)
        this.dictCheckboxOptions = []
        this.$commonJs.filterDataDict("useState",this.dictCheckboxOptions)
        this.dictSelectOptions = []
        this.$commonJs.filterDataDict("useState",this.dictSelectOptions)
        if(this.openType!="add"){
          testCodeDetail(this.id).then(res=>{
            if(res.code==200){
              this.formData.form = res.data
              this.loadFormat()
            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          })
        }
      }
    },
  };
</script>

<style lang="scss" scoped>

</style>
